<!--应收明细-->
<template>
  <div class="receivable-detail-container">
    <!-- 筛选区域 -->
    <div class="controls-section">
      <div class="filters">
        <div> <el-button type="primary">新建</el-button></div>
        <div class="filter-item">
          <label>结算类型</label>
          <select v-model="settlementType">
            <option value="">全部</option>
            <option :value="0">现结</option>
            <option :value="1">月结</option>
            <option :value="2">货到付款</option>
          </select>
        </div>

      </div>
      <div class="actions">
        <button class="btn-primary" @click="onSearch">搜索</button>
        <button class="btn-secondary" @click="onReset">重置</button>
      </div>
    </div>

    <!-- 表格区域 -->
    <div class="table-section">
      <table>
        <thead>
          <tr>
            <th><input type="checkbox" v-model="allSelected"></th>
            <th>结算类型</th>
            <th>客户</th>
            <th>销售订单号</th>
            <th>应收金额</th>
            <th>已收金额</th>
            <th>未收金额</th>
            <th>状态</th>
            <th>创建时间</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in tableData" :key="item.id || index">
            <td><input type="checkbox" v-model="item._selected"></td>
            <td>{{ fmtSettlement(item.settlementType) }}</td>
            <td>{{ item.customerName || '-' }}</td>
            <td>{{ item.orderNo || '-' }}</td>
            <td>{{ fmtMoney(item.receivableAmount) }}</td>
            <td>{{ fmtMoney(item.receivedAmount) }}</td>
            <td>{{ fmtMoney(item.unreceivedAmount) }}</td>
            <td>{{ fmtStatus(item.status) }}</td>

            <td>{{ fmtDateTime(item.createTime) }}</td>
            <td><span class="link-style" @click="viewDetail(item)">查看</span></td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- 底部区域 -->
    <div class="footer-section">
      <div class="footer-left">
        <input type="checkbox" v-model="allSelected">
        <label>全选</label>
        <button class="btn-secondary">导出</button>
      </div>
      <div class="pagination">
        <button :disabled="pageNum<=1" @click="changePage(pageNum-1)">&lt;</button>
        <button class="active" disabled>{{ pageNum }}</button>
        <button :disabled="pageNum>=totalPages()" @click="changePage(pageNum+1)">&gt;</button>
        <select v-model.number="pageSize" @change="reload()">
          <option :value="5">5条/页</option>
          <option :value="10">10条/页</option>
          <option :value="20">20条/页</option>
        </select>
      </div>
    </div>

    <!-- 详情抽屉/弹层 -->
    <div v-if="showDetail" class="detail-drawer">
      <div class="drawer-body">
        <div class="drawer-header">
          <span>{{ detail?.receivableNo }} - 应收明细详情</span>
          <button class="btn-secondary" @click="showDetail=false">关闭</button>
        </div>
        <div class="drawer-content">
          <div class="section">
            <div class="section-title">基本信息</div>
            <div class="form-grid">
              <div class="form-item">
                <label>应收编号</label>
                <input type="text" :value="detail?.receivableNo || '-'" disabled>
              </div>
              <div class="form-item">
                <label>客户</label>
                <input type="text" :value="detail?.customerName || '-'" disabled>
              </div>
              <div class="form-item">
                <label>收款状态</label>
                <input type="text" :value="fmtStatus(detail?.status)" disabled>
              </div>
              <div class="form-item">
                <label>创建时间</label>
                <input type="text" :value="fmtDateTime(detail?.createTime)" disabled>
              </div>
              <div class="form-item">
                <label>结算类型</label>
                <input type="text" :value="fmtSettlement(detail?.settlementType)" disabled>
              </div>
              <div class="form-item">
                <label>付款条件</label>
                <input type="text" :value="detail?.paymentTerm || '-'" disabled>
              </div>
              <div class="form-item">
                <label>到期日</label>
                <input type="text" :value="fmtDate(detail?.dueDate)" disabled>
              </div>
            </div>
          </div>

          <div class="section">
            <div class="section-title">对账信息</div>
            <div class="form-grid">
              <div class="form-item">
                <label>本期应收</label>
                <input type="text" :value="fmtMoney(detail?.receivableAmount)" disabled>
              </div>
              <div class="form-item">
                <label>本期已收</label>
                <input type="text" :value="fmtMoney(detail?.receivedAmount)" disabled>
              </div>
              <div class="form-item">
                <label>本期待收</label>
                <input type="text" :value="fmtMoney(detail?.unreceivedAmount)" disabled>
              </div>
            </div>
          </div>

          <div class="section">
            <div class="section-title">关联信息</div>
            <div class="form-grid">
              <div class="form-item">
                <label>销售订单号</label>
                <input type="text" :value="detail?.orderNo || '-'" disabled>
              </div>
              <div class="form-item">
                <label>对账单号</label>
                <input type="text" :value="detail?.reconciliationNo || detail?.reconciliationId || '-'" disabled>
              </div>
              <div class="form-item form-item--full">
                <label>备注</label>
                <input type="text" :value="detail?.remark || '-'" disabled>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { receivablePage, receivableInfo } from '@/api/finance/receivableDetail'
export default {
  name: 'AccountsReceivableDetail',
  data() {
    return {
      // 查询条件
      keyword: '',
      settlementType: '',
      // 分页
      pageNum: 1,
      pageSize: 5,
      total: 0,
      // 表格数据
      tableData: [],
      // 详情
      showDetail: false,
      detail: null
    };
  },
  computed: {
    allSelected: {
      get() {
        return this.tableData.length > 0 && this.tableData.every(item => item._selected);
      },
      set(value) {
        this.tableData.forEach(item => {
          item._selected = value;
        });
      }
    }
  },
  mounted() {
    this.reload()
  },
  methods: {
    onSearch() {
      this.pageNum = 1
      this.reload()
    },
    onReset() {
      this.pageNum = 1
      this.pageSize = 10
      this.settlementType = ''
      this.keyword = ''
      this.reload()
    },
    async reload() {
      const payload = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        receivableNo: this.keyword || undefined,
        settlementType: this.settlementType === '' ? undefined : Number(this.settlementType)
      }
      const { data } = await receivablePage(payload)
      const page = data?.data || data // 兼容两种返回
      this.total = page.total || 0
      this.tableData = (page.records || []).map(it => ({ ...it, _selected: false }))
      // 修正当前页不超过总页数
      const pages = this.totalPages()
      if (this.pageNum > pages) this.pageNum = pages
    },
    changePage(p) {
      if (p < 1) return
      const pages = this.totalPages()
      if (p > pages) return
      this.pageNum = p
      this.reload()
    },
    totalPages() {
      return Math.max(1, Math.ceil(this.total / this.pageSize))
    },
    async viewDetail(row) {
      const id = row?.id
      if (!id) return
      const { data } = await receivableInfo(id)
      this.detail = data?.data || data
      this.showDetail = true
    },
    fmtMoney(v) {
      if (v === null || v === undefined) return '-'
      const n = Number(v)
      if (Number.isNaN(n)) return String(v)
      return n.toFixed(2)
    },
    fmtDate(ts) {
      if (!ts) return '-'
      const d = new Date(ts)
      if (Number.isNaN(d.getTime())) return '-'
      return d.toISOString().slice(0, 10)
    },
    fmtDateTime(ts) {
      if (!ts) return '-'
      const d = new Date(ts)
      if (Number.isNaN(d.getTime())) return '-'
      return d.toISOString().replace('T', ' ').slice(0, 19)
    },
    fmtStatus(s) {
      const map = { 1: '待收款', 2: '部分收款', 3: '已收款', 4: '坏账' }
      return map[s] || '-'
    },
    fmtSettlement(s) {
      const map = { 0: '现结', 1: '月结', 2: '货到付款' }
      return map[s] ?? '-'
    }
  }
}
</script>

<style scoped>
.receivable-detail-container {
  padding: 20px;
  background-color: #f5f7fa;
}

.controls-section {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  margin-bottom: 20px;
  align-items: center;
}

.filters {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
}

.filter-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.filter-item label {
  font-size: 14px;
  white-space: nowrap;
}

.filter-item input, .filter-item select {
  padding: 8px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  width: 150px;
}

.actions {
  display: flex;
  gap: 10px;
}

.btn-primary {
  background-color: #409eff;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
}

.btn-secondary {
  background-color: #fff;
  color: #606266;
  border: 1px solid #dcdfe6;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
}

.table-section {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid #ebeef5;
}

th {
  background-color: #f8f9fa;
}

.link-style {
    color: #409eff;
    cursor: pointer;
}

.footer-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  background-color: #fff;
  padding: 10px 20px;
  border-radius: 8px;
}

.footer-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pagination {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pagination button {
  padding: 6px 12px;
  border: 1px solid #dcdfe6;
  background-color: #fff;
  cursor: pointer;
  border-radius: 4px;
}

.pagination button.active {
  background-color: #409eff;
  color: white;
  border-color: #409eff;
}

.pagination select {
  padding: 6px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
}

.detail-drawer {
  position: fixed;
  right: 0;
  top: 0;
  bottom: 0;
  width: 420px;
  background: #fff;
  box-shadow: -2px 0 8px rgba(0,0,0,0.08);
  display: flex;
}
.drawer-body { flex: 1; display: flex; flex-direction: column; }
.drawer-header { display:flex; justify-content: space-between; align-items:center; padding:12px 16px; border-bottom:1px solid #eee; }
.drawer-content { padding: 12px 16px; }
.section { margin-bottom: 16px; }
.section-title { font-weight: 600; padding: 6px 0; border-bottom: 1px solid #e5e7eb; margin-bottom: 12px; }
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 12px 16px; }
.form-item { display: flex; flex-direction: column; gap: 6px; }
.form-item--full { grid-column: 1 / -1; }
.form-item input { height: 34px; padding: 0 10px; border: 1px solid #dcdfe6; border-radius: 4px; background: #f7f7f7; }
</style>
